<template>
  <div class="department-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-fort-awesome"></i> 系管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <!-- 统计卡片区域 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="el-icon-office-building"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">系部总数</div>
              <div class="stat-value">{{ tableData.length }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon green">
              <i class="el-icon-reading"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">专业总数</div>
              <div class="stat-value">{{ getTotalMajors() }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon blue">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">教师总数</div>
              <div class="stat-value">{{ getTotalTeachers() }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon purple">
              <i class="el-icon-data-analysis"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">平均专业数</div>
              <div class="stat-value">{{ getAverageMajors() }}</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 搜索和操作区域 -->
      <div class="action-card">
        <el-row :gutter="24" type="flex" justify="space-between" align="middle">
          <el-col :span="4">
            <el-button @click="create" type="primary" icon="el-icon-plus" size="medium" class="create-btn">创建系</el-button>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="queryForm.name"
              placeholder="请输入系名称搜索"
              prefix-icon="el-icon-search"
              clearable
              @keyup.enter.native="query"
              class="search-input"
            >
              <el-button slot="append" @click="query" type="primary">搜索</el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>

      <!-- 表格区域 -->
      <div class="table-card">
        <el-table
          :data="tableData"
          stripe
          v-loading="loading"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          class="custom-table"
        >
          <el-table-column label="系Id" prop="id" width="100" align="center"/>
          <el-table-column label="系名称" prop="name" min-width="200"/>
          <el-table-column label="专业数量" prop="majorCount" width="120" align="center">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.majorCount }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="教师数量" prop="teacherCount" width="120" align="center">
            <template slot-scope="scope">
              <el-tag type="success" size="medium">{{ scope.row.teacherCount }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.row.id)"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                class="action-btn"
              >编辑</el-button>
              <el-button
                @click="deleteItem(scope.row.id)"
                size="mini"
                type="danger"
                icon="el-icon-delete"
                class="action-btn"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            @current-change="getPage"
            :current-page.sync="pageIndex"
            :page-size="pageSize"
            :total="pageSize * pageCount"
            background
            layout="total, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 对话框 -->
      <el-dialog
        :visible.sync="editing"
        :title="entityForm.id === -1 ? '新增系' : '编辑系'"
        width="500px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="custom-dialog"
      >
        <el-form
          :model="entityForm"
          ref="form"
          label-width="80px"
          :rules="rules"
          class="custom-form"
        >
          <el-form-item label="系名称" prop="name">
            <el-input
              v-model="entityForm.name"
              placeholder="请输入系名称"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editing = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as api from "../../api/admin/department";

export default {
  name: "AdminDepartment",
  data() {
    return {
      queryForm: {
        name: ""
      },
      entityForm: {},
      tableData: [],
      pageSize: api.pageSize,
      pageCount: 1,
      pageIndex: 1,
      editing: false,
      loading: false,
      rules: {
        name: [
          { required: true, message: '请输入系名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    query() {
      this.loading = true;
      api.getPageCount(this.queryForm.name).then(res => {
        this.pageCount = res;
        this.pageIndex = 1;
        this.getPage(1);
      }).finally(() => {
        this.loading = false;
      });
    },
    getPage(pageIndex) {
      this.loading = true;
      api.getPage(pageIndex, this.queryForm.name).then(res => {
        this.tableData = res;
      }).finally(() => {
        this.loading = false;
      });
    },
    create() {
      this.entityForm = {
        id: -1,
        name: ""
      };
      this.editing = true;
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate();
      });
    },
    edit(id) {
      api.get(id).then(res => {
        this.entityForm = res;
        this.editing = true;
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate();
        });
      });
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.entityForm.id === -1) {
            api.create(this.entityForm).then(() => {
              this.finishSave();
            });
          } else {
            api.update(this.entityForm).then(() => {
              this.finishSave();
            });
          }
        }
      });
    },
    finishSave() {
      this.$message.success("操作成功");
      this.getPage(this.pageIndex);
      this.editing = false;
    },
    deleteItem(id) {
      this.$confirm('确认删除该系吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteItem(id).then(() => {
          this.$message.success("删除成功");
          this.getPage(this.pageIndex);
        });
      }).catch(() => {});
    },
    // 添加统计方法
    getTotalMajors() {
      return this.tableData.reduce((sum, item) => sum + item.majorCount, 0);
    },
    getTotalTeachers() {
      return this.tableData.reduce((sum, item) => sum + item.teacherCount, 0);
    },
    getAverageMajors() {
      if (this.tableData.length === 0) return '0';
      const avg = this.getTotalMajors() / this.tableData.length;
      return avg.toFixed(1);
    }
  },
  created() {
    this.query();
  }
};
</script>

<style scoped>
.department-wrap {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 100px);
}

.crumbs {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.crumbs .el-breadcrumb {
  font-size: 16px;
  color: #606266;
}

/* 统计卡片样式 */
.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;

  i {
    font-size: 24px;
    color: #fff;
  }

  &.green {
    background: #67C23A;
  }

  &.blue {
    background: #409EFF;
  }

  &.purple {
    background: #6B48FF;
  }
}

.stat-info {
  flex: 1;

  .stat-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 8px;
  }

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }
}

/* 操作区域卡片 */
.action-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 表格卡片 */
.table-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.custom-table {
  margin-bottom: 20px;

  ::v-deep .el-table__header-wrapper {
    th {
      background-color: #f5f7fa !important;
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      padding: 12px 0;
    }
  }

  ::v-deep .el-table__row {
    td {
      padding: 12px 0;
    }
  }
}

.action-btn {
  padding: 8px 16px;
  margin: 0 4px;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 搜索框样式 */
.search-input {
  ::v-deep .el-input__inner {
    border-radius: 4px 0 0 4px;
    border-right: none;
  }
  
  ::v-deep .el-input-group__append {
    background-color: #409EFF;
    border-color: #409EFF;
    color: #fff;
    padding: 0 20px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }
}

/* 创建按钮样式 */
.create-btn {
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
}

/* 分页器样式 */
.pagination-container {
  margin-top: 20px;
  padding: 10px 0;
  text-align: right;
}

/* 弹窗样式 */
.custom-dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
    overflow: hidden;
  }
  
  ::v-deep .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
    margin: 0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }
  
  ::v-deep .el-dialog__body {
    padding: 24px;
  }
  
  ::v-deep .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid #ebeef5;
    background: #f8f9fa;
  }
}

.custom-form {
  ::v-deep .el-form-item__label {
    font-weight: 500;
    color: #606266;
  }
  
  ::v-deep .el-input__inner {
    border-radius: 4px;
    transition: all 0.3s;
    
    &:focus {
      border-color: #409EFF;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}
</style>
